#app{
    --op-primary-color: rgb(31,175,243);
    --op-gray-bg-color: rgb(244,244,244);
    --op-page-padding: 10px;
}
.op{
    &-thin-border{
        color: rgb(247, 68, 68);
        position: relative;
        border:none;
        // 如果直接使用 border 的话，因为这里有 transform: scale(0.2) 把边框线变细
        // 但这样也会把整个元素也缩小
        // 所以这里使用伪元素 :before 来画边框线，这样缩小边框线就不会影响到整个元素
        &:before{
            content: ''; //用于在css渲染中向元素逻辑上的头部或尾部添加内容，必须要有
            position: absolute;
            top: 0;
            left: 0;
            border: 1px solid rgb(247, 68, 68);
            border-radius: 20px;
            box-sizing: border-box;
            width: 500%;
            height: 500%;
            transform: scale(0.2);
            transform-origin: left top; //在对元素进行变换的时候，设置围绕哪一个点进行变化
        }
    }
    &-fullscreen{
        background: var(--op-gray-bg-color);
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
    }
    &—lazyload{
        background-color: rgb(173, 171, 171);
    }
}